<template>
  <div class="sub-map002">
      <div id="test" style="width:1980px;height: 1080px;opacity: .05"></div>
  </div>
</template>
<script>

import {loadBMap,loadBMapGl} from '@/assets/js/baiduMap.js'
import Sichuan from '@/components/map/Sichuan.json'
export default {
  name: 'baiduBlackMap',
  data: () => {
    return {
      BMap:'',
      BMapGL:'',
    }
  },
  mounted() {
    const _this = this
    window.initBaiduMapScript = () => {
      this.initMap(window.BMap)
    }
    window.initBaiduMapGLScript = () => {
      this.initMap(window.BMapGL)
    }
    loadBMapGl('initBaiduMapGLScript')
    // loadBMap('initBaiduMapScript')

  },
  methods: {
    initMap(BMap){

      var map = new BMap.Map("test");
      var point = new BMap.Point(104.07102, 30.666756);
      map.centerAndZoom(point, 5);
      map.setMapStyleV2({
        styleId: 'b0fef64b141b1893af800479057f7c2a'
      });
      map.enableScrollWheelZoom(true);
      // var colorBand = ['#1a316f'];
      // var gParse = new BMap.GeoJSONParse({
      //   reference: 'GCJ02'
      // });
      // var fs = gParse.readFeaturesFromObject(Sichuan, {
      //   fillColor: 'red'
      // }, function (overlay) {
      //   var index = overlay.properties.join || 0;
      //   overlay.setFillColor(colorBand[index]);
      //   overlay.setZIndex(-2);
      //   map.addOverlay(overlay);
      // });
    }
  }
}
</script>
<style lang="scss" scoped>
.sub-map002 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;

  .bm-view {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
</style>
